<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>web worker</title>
</head>
<body>
</body>
<script>
    let worker = new Worker('./worker.js');
    worker.postMessage({name: 'task1', data: null})
    worker.onmessage = (e) => {
        console.log('接收到woker的结果:', e.data);
        // 结束woker线程，worker线程中可以调用self.close()结束自身
        // woker.terminate();
    };
    // 主线程与Worker之间传递数据的方式是拷贝而不是传引用，但是拷贝方式发送大量二进制数据会造成性能问题。
    // 为了解决这个问题，JavaScript允许主线程把二进制数据直接转移给子线程，但是一旦转移，主线程就无法再
    // 使用这些二进制数据了，这是为了防止出现多个线程同时修改数据的麻烦局面。这种转移数据的方法，叫做Transferable Objects。
    // Transferable Objects包括ArrayBuffer, MessagePort, and ImageBitmap等对象
    // 这使得主线程可以快速把数据交给 Worker，对于影像处理、声音处理、3D 运算等就非常方便了，不会产生性能负担。
    let transferData = new TextEncoder().encode('abc').buffer;
    worker.postMessage({name: 'task2', data: transferData}, [transferData]);
    
</script>
</html>